import React, { Component } from 'react';
import { Form, InputNumber, Radio, Space, Button } from 'antd';
import TheTable from '@/components/TheTable';
import TheButton from '@/components/TheButton';
import TheDialog from '@/components/TheDialog';
import { apiGetCancelPage, apiGetCancelAdd } from '@/request/petTaxi';
import _ from 'lodash';
import './style/index.less';

class Cancel extends Component {
  state = {
    dataSource: [],
    columns: [
      {
        title: '时长',
        dataIndex: 'waitTime',
        key: 'waitTime',
        render: (text, record) => {
          return `${text || 0}分钟`
        }
      },
      {
        title: '取消后扣除费用',
        dataIndex: 'percentageDeduction',
        key: 'percentageDeduction',
        render: (text, record) => {
          return `${text || 0}%`
        }
      },
      {
        title: '操作',
        render: (text, record) => {
          return <>
            <TheButton haspermi={['taxi:cancel:delete']} onClick={() => this.delConfirm(record)}>删除</TheButton>
            <TheButton haspermi={['taxi:cancel:edit']} onClick={() => this.editDialog(record)}>编辑</TheButton>
          </>
        }
      }
    ],
    visible: false,
    title: '',
    type: '',
    editValue: {}
  }
  componentDidMount() {
    this.getData()
  }
  getData = async () => {
    let res = await apiGetCancelPage()
    if (res.data && res.code === 0) {
      this.setState({
        dataSource: res.data
      })
    }
  }
  addDialog = () => {
    this.setState({
      visible: true,
      title: '新增',
      type: 'add'
    })
  }
  editDialog = (value) => {
    this.setState({
      visible: true,
      title: '编辑',
      type: 'edit',
      editValue: value
    })
  }
  dialogClose = () => {
    this.setState({
      visible: false,
      title: '',
      type: '',
      editValue: {}
    })
  }
  dialogSave = async (value) => {
    const { type, dataSource, editValue } = this.state
    if (type === 'add') {
      const { tripType } = value
      let data = this.addData(dataSource, value, tripType)
      let res = await apiGetCancelAdd({ ...data })
      if (res.code === 0) {
        React.$message({
          type: 'info',
          content: '新增成功'
        })
        this.dialogClose()
        this.getData()
      }
    }
    if (type === 'edit') {
      const { tripType } = editValue
      let data = this.removeData(editValue)
      let config = this.addData(data, { ...value, tripType }, tripType)
      let res = await apiGetCancelAdd({ ...config })
      if (res.code === 0) {
        React.$message({
          type: 'info',
          content: '修改成功'
        })
        this.dialogClose()
        this.getData()
      }
    }
  }
  removeData = (editValue) => {
    const { dataSource } = this.state
    const { tripCancelConfigId, tripType } = editValue
    let data = _.forIn(dataSource, (v, i) => {
      v = _.remove(v, k => {
        return k.tripCancelConfigId === tripCancelConfigId && k.tripType === tripType
      })
    })
    return data;
  }
  addData = (dataSource, value, tripType) => {
    let data = _.forIn(dataSource, (v, i) => {
      if (tripType === 'W' && i === 'wconfig') {
        v.push(value)
      }
      if (tripType === 'G' && i === 'gconfig') {
        v.push(value)
      }
    })
    return data;
  }
  delConfirm = value => {
    React.$confirm({
      title: '您确认删除此条信息吗？',
      onOk: async () => {
        let data = this.removeData(value);
        let res = await apiGetCancelAdd({ ...data })
        if (res.code === 0) {
          React.$message({
            type: 'info',
            content: '删除成功'
          })
          this.getData()
        }
      }
    })
  }
  render() {
    const { dataSource, columns, visible, title, editValue, type } = this.state
    return (
      <div className='p-layout-box pet-taxi-cancel'>
        <div className="p-layout-content">
          <TheButton haspermi={['taxi:cancel:add']} onClick={() => this.addDialog()}  type="default" size="large">新增</TheButton>
          <div className='table-box'>
            {
              _.map(dataSource, (v, i) => {
                return <div className='item'>
                  <TheTable dataSource={v} columns={columns} title={() => {
                    let title = i === 'wconfig' ? '司机已到达约定地点' : '司机已出发'
                    return title;
                  }} />
                </div>
              })
            }
          </div>
        </div>
        <TheDialog
          title={title}
          visible={visible}
          footer={null}
          width={420}
          handleCancel={this.dialogClose}
        >
          <Form onFinish={this.dialogSave} initialValues={editValue}>
            {type === 'add' && <Form.Item label="选择类型" name="tripType" rules={[{ required: true }]}>
              <Radio.Group value="G">
                <Radio value="G">司机已出发</Radio>
                <Radio value="W">司机已到达约定地点</Radio>
              </Radio.Group>
            </Form.Item>
            }
            <Form.Item label="时长" name="waitTime" rules={[{ required: true }]}>
              <InputNumber addonAfter="分钟" min={1} precision={0} />
            </Form.Item>
            <Form.Item label="费用" name="percentageDeduction" rules={[{ required: true }]}>
              <InputNumber addonAfter="%" min={0} max={100} precision={0} />
            </Form.Item>
            <Form.Item>
              <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: -30 }}>
                <Space>
                  <Button onClick={this.dialogClose}>取消</Button>
                  <Button type="primary" htmlType='submit'>保存</Button>
                </Space>
              </div>
            </Form.Item>
          </Form>
        </TheDialog>
      </div>
    );
  }
}

export default Cancel;